<template>
    <div class="page-container">
        <div class="section">
            <div class="page-title">企业的校园事业部</div>

            <div class="page-tiny-title">
                专注高校6年，连续三轮融资，覆盖1000+所高校
            </div>

            <ul class="count-lists">
                <li class="count-item count-item-1">
                    <p class="count-num">{{ indexCount.company_count }}</p>
                    <p class="count-name">已入驻(家)</p>
                    <div class="count-desc">品牌/商家入驻</div>
                    <img
                        src="//cdn.zsdx.cn/zsdx-website/2020mobile/images/index-item-1.png"
                        alt=""
                    />
                </li>

                <li class="count-item count-item-2">
                    <p class="count-num">{{ indexCount.school_count }}</p>
                    <p class="count-name">已覆盖(所)</p>
                    <div class="count-desc">高校覆盖</div>
                    <img
                        src="//cdn.zsdx.cn/zsdx-website/2020mobile/images/index-item-2.png"
                        alt=""
                    />
                </li>

                <li class="count-item count-item-3">
                    <p class="count-num">{{ indexCount.agent_count }}</p>
                    <p class="count-name">代理学生(人)</p>
                    <div class="count-desc">校园代理</div>
                    <img
                        src="//cdn.zsdx.cn/zsdx-website/2020mobile/images/index-item-3.png"
                        alt=""
                    />
                </li>
            </ul>
        </div>

        <!-- 轮播图 -->
        <div v-if="bannerList.length > 0" class="section">
            <div class="swiper-banner-container">
                <swiper ref="mySwiper" :options="swiperOption">
                    <swiper-slide
                        v-for="(item, index) in bannerList"
                        :key="index"
                    >
                        <a
                            :href="
                                item.link_url ? item.lin_url : 'javascript:;'
                            "
                        >
                            <img :src="item.pic_url" class="image-index" />
                        </a>
                    </swiper-slide>
                    <div slot="pagination" class="swiper-pagination"></div>
                </swiper>
            </div>
        </div>

        <!-- 我们的服务 -->
        <zsdx-service></zsdx-service>

        <!-- 我们的解决方案 -->
        <zsdx-solution></zsdx-solution>

        <!-- 校园品牌说 -->
        <zsdx-brand v-if="brandList.length > 0" :list="brandList"></zsdx-brand>

        <!-- 核心功能与服务 -->
        <zsdx-products></zsdx-products>

        <!-- 合作商家和品牌 -->
        <zsdx-cooperation></zsdx-cooperation>

        <div class="section">
            <zsdx-timeline></zsdx-timeline>
        </div>

        <div class="section">
            <zsdx-footer></zsdx-footer>
        </div>
    </div>
</template>

<script>
import zsdxTimeline from '@/components/index/zsdx-timeline'
import zsdxFooter from '@/components/common/footer/footer'
import zsdxService from '@/components/index/zsdx-service'
import zsdxSolution from '@/components/index/zsdx-solution'
import zsdxBrand from '@/components/index/zsdx-brand'
import zsdxProducts from '@/components/index/zsdx-products'
import zsdxCooperation from '@/components/index/zsdx-cooperation'

import { getIndexStat, getBannerList, geBrandList } from '@/api/index'
import { removeSessionTicket } from '@/plugins/auth'
export default {
    components: {
        zsdxTimeline,
        zsdxFooter,
        zsdxService,
        zsdxSolution,
        zsdxBrand,
        zsdxProducts,
        zsdxCooperation
    },
    data() {
        return {
            swiperOption: {
                loop: true,
                slidesPerView: 'auto',
                centeredSlides: true,
                spaceBetween: 0,
                pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true
                }
            },
            indexCount: {
                company_count: 0,
                agent_count: 0,
                school_count: 0
            },
            bannerList: [],
            brandList: []
        }
    },
    computed: {},
    mounted() {
        // this.swiper.slideTo(3, 1000, false)
    },
    created() {
        if (!process.server) {
            this.fnGetStat()
            this.fnGetBannerList()
            this.fnGetBrandList({
                status: 1
            })
        }
    },
    methods: {
        fnClear() {
            removeSessionTicket()
        },
        fnGetStat() {
            getIndexStat().then((res) => {
                this.indexCount = res.data
            })
        },
        fnGetBannerList() {
            getBannerList()
                .then((res) => {
                    this.bannerList = res.data
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        fnGetBrandList(parmas) {
            geBrandList(parmas)
                .then((res) => {
                    this.brandList = res.data.list
                })
                .catch((err) => {
                    console.log(err)
                })
        }
    }
}
</script>

<style lang="less">
.page-container {
    background: #030e1f;
    min-height: calc(100vh - 0.8rem);
    .section {
        .page-title {
            font-size: 0.52rem;
            font-weight: 300;
            color: rgba(255, 255, 255, 1);
            padding-top: 0.56rem;
            padding-bottom: 0.28rem;
            text-align: center;
        }
        .page-tiny-title {
            font-size: 0.24rem;
            font-weight: 300;
            color: rgba(255, 255, 255, 1);
            text-align: center;
        }

        .count-lists {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 0.56rem;
            margin-bottom: 0.8rem;
            .count-item {
                display: flex;
                flex-direction: column;
                width: 2.26rem;
                justify-content: center;
                align-items: center;
                position: relative;
                img {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    width: 0.98rem;
                    height: 1.26rem;
                }
                &:nth-child(2) {
                    margin-left: 0.12rem;
                    margin-right: 0.12rem;
                }
                &.count-item-1 {
                    background-image: linear-gradient(
                        300deg,
                        rgba(240, 152, 25, 1) 0%,
                        rgba(252, 166, 91, 1) 100%
                    );
                }
                &.count-item-2 {
                    background: linear-gradient(
                        304deg,
                        rgba(25, 92, 240, 1) 0%,
                        rgba(91, 127, 252, 1) 100%
                    );
                }
                &.count-item-3 {
                    background: linear-gradient(
                        300deg,
                        rgba(33, 167, 203, 1) 0%,
                        rgba(68, 215, 230, 1) 100%
                    );
                }
                .count-num {
                    font-size: 0.36rem;
                    font-weight: 600;
                    color: rgba(255, 255, 255, 1);
                    margin-top: 0.36rem;
                    margin-bottom: 0.12rem;
                }
                .count-name {
                    font-size: 0.24rem;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    margin-bottom: 0.24rem;
                }
                .count-desc {
                    font-size: 0.24rem;
                    font-weight: 400;
                    color: rgba(3, 14, 31, 1);
                    height: 0.56rem;
                    background: #fff;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        .swiper-banner-container {
            width: 7.02rem;
            height: 3.68rem;
            margin: 0 auto;
            margin-bottom: 0.8rem;
        }
        .image-index {
            width: 7.02rem;
            height: 3.68rem;
        }
    }
}

@keyframes twinkle {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(0.8);
    }
}
@keyframes turnUp {
    0% {
        transform: translateY(500px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes turnDown {
    0% {
        transform: translateY(-500px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes btn-scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale3d(1.06, 1.06, 0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotateReverse {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(-180deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
</style>
